<template>
    <div class="detail">
      <DetailHeader  :title='playlist.name' ref="header"></DetailHeader>
      <DetailTop :path="playlist.coverImgUrl" :playlist='playlist' :album='album' :artist='artist' :rank='rank' ref="top" ></DetailTop>
      <div class="bottom">
        <ScrollView ref="scrollview">
          <DetailBottom :playlist='playlist.tracks' :comments='commentsList'></DetailBottom>
        </ScrollView>
      </div>
    </div>
</template>

<script>
import DetailHeader from '../components/Detail/DetailHeader.vue'
import DetailTop from '../components/Detail/DetailTop.vue'
import DetailBottom from '../components/Detail/DetailBottom.vue'
import ScrollView from '../components/ScrollView.vue'
import { getPlayList, getAlbum, getArtistsSongs, getTopList, getBannerComment, getAlbumComment, getMusicComment } from '../api/index'
import { mapGetters, mapActions } from 'vuex'
import MetaInfo from '../../vue-meta-info'
export default {
  name: 'Detail',
  metaInfo: MetaInfo.detail,
  components: {
    DetailHeader,
    DetailTop,
    DetailBottom,
    ScrollView
  },
  data () {
    return {
      playlist: {},
      album: {},
      artist: {},
      rank: {},
      commentsList: {}
    }
  },
  created () {
    if (this.$route.params.type === 'personalized') {
      getPlayList({ id: this.$route.params.id })
        .then((data) => {
          this.playlist = data.playlist
        })
        .catch((err) => {
          console.log(err)
        })
      getBannerComment({ id: this.$route.params.id, type: 'playlist' })
        .then((data) => {
          this.commentsList = data
        })
        .catch((err) => {
          console.log(err)
        })
      this.setCommentsList({ id: this.$route.params.id, type: 'playlist' })
    } else if (this.$route.params.type === 'albums') {
      getAlbum({ id: this.$route.params.id })
        .then((data) => {
          this.playlist = {
            name: data.album.name,
            coverImgUrl: data.album.picUrl,
            tracks: data.songs
          }
          this.album = data.album
        })
        .catch((err) => {
          console.log(err)
        })
      getAlbumComment({ id: this.$route.params.id, type: 'album' })
        .then((data) => {
          this.commentsList = data
        })
        .catch((err) => {
          console.log(err)
        })
      this.setCommentsList({ id: this.$route.params.id, type: 'album' })
    } else if (this.$route.params.type === 'singer') {
      getArtistsSongs({ id: this.$route.params.id })
        .then((data) => {
          this.playlist = {
            name: data.artist.name,
            coverImgUrl: data.artist.picUrl,
            tracks: data.hotSongs
          }
          this.artist = data.artist
        })
        .catch((err) => {
          console.log(err)
        })
    } else if (this.$route.params.type === 'rank') {
      getTopList({ id: this.$route.params.id })
        .then((data) => {
          this.playlist = {
            name: data.playlist.name,
            coverImgUrl: data.playlist.creator.backgroundUrl,
            tracks: data.playlist.tracks
          }
          this.rank = data.playlist
        })
        .catch((err) => {
          console.log(err)
        })
      getBannerComment({ id: this.$route.params.id, type: 'playlist' })
        .then((data) => {
          this.commentsList = data
        })
        .catch((err) => {
          console.log(err)
        })
      this.setCommentsList({ id: this.$route.params.id, type: 'playlist' })
    }
  },
  mounted () {
    const defailtHeight = this.$refs.top.$el.offsetHeight
    this.$refs.scrollview.scrolling((offsetY) => {
      if (offsetY < 0) {
        const scale = 5 * Math.abs(offsetY) / defailtHeight
        this.$refs.top.$el.style.filter = `blur(${scale}px)`
        this.$refs.top.$el.style.top = `${offsetY + 100}px`
        this.$refs.header.$el.style.opacity = 1 - (scale / 20) <= 0.7 ? 0.7 : 1 - (scale / 20)
        this.$refs.top.$el.firstChild.style.borderRadius = `${50 - scale}%`
        scale > 1.5 ? this.$bus.$emit('titleCheckout', false) : this.$bus.$emit('titleCheckout', true)
      } else {
        const scale = 1 + offsetY / defailtHeight
        this.$refs.top.$el.style.transform = `scale(${scale})`
        this.$refs.header.$el.style.opacity = 1
      }
    })
    this.$bus.$on('MusicComment', (id) => {
      this.musicComment(id)
    })
  },
  methods: {
    ...mapActions([
      'setIsCommentsList',
      'setCommentsList'
    ]),
    musicComment (id) {
      getMusicComment({ id: id, type: 'music' })
        .then((data) => {
          this.commentsList = data
        })
        .catch((err) => {
          console.log(err)
        })
      this.setCommentsList({ id: id, type: 'music' })
    }
  },
  computed: {
    ...mapGetters(['comments', 'isComments'])
  }
}
</script>

<style scoped lang='scss'>
@import "../assets/css/mixin";
.detail{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    @include bg_sub_color();
    .bottom{
      position: fixed;
      top: 680px;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
    }
}
</style>
